<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>

    <style type="text/css">
        body {
            background-color: rgba(255, 255, 255, 0.1);
        }

        div {
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
        }

        table {
            position: absolute;
            left: 20%;
            border: none;
            border-radius: 15px;
            text-align: center;
            font-family: '楷体', serif;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.6);
            padding: 10px;
        }

        span {
            margin-left: 15px;
            margin-right: 15px;
        }

        .main_context {
            display: block;
            border-radius: 5px;
            border: 1px solid;
            width: 100%;
            height: 280px;
            text-align: justify;
            margin-top: 1%;
            margin-bottom: 1%;
            overflow-y: auto;
        }

        .main_context::-webkit-scrollbar {
            width: 5px;
        }

        .main_context::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #ababab9e;
        }

        .input {
            resize: none;
            border-radius: 5px;
            width: 290px;
            height: 50px;
            font-size: 18px;
            margin-top: 1%;
            border: 0 solid;
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .btn {
            padding: 3px 25px;
            border: 0 solid;
            border-radius: 30px;
            margin-left: 1%;
            margin-right: 1%;
            background-color: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.6)
        }

        .btn:active {
            position: relative;
            top: 1px;
        }

        .btn:focus {
            outline: 0;
        }

        .chatbubble {
            display: table;
            padding: 3px 15px;
            font-size: 16px;
            background: #a4a4c157;
            border: 0 solid;
            border-radius: 15px;
        }

        .main_context .chatbubble:first-of-type {
            margin-top: 7px;
        }
    </style>

</head>
<body>
<div>
    <table>
        <tr>
            <th colspan="3">聊天室</th>
        </tr>
        <tr>
            <td colspan="3">
                <div class="main_context" id="main_context"></div>
            </td>
        </tr>
        <tr>
            <td>
                <span id="username">username</span>
            </td>
            <td>
                <label for="textarea">
                    <textarea class="input" name="textarea" id="textarea" maxlength="19"></textarea>
                </label>
            </td>
            <td>
                <input class="btn" type="button" name="send" id="send" value="发送" onclick="sendMessage()">
            </td>
        </tr>
    </table>
</div>

<script>
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return false;
    }

    var username = getQueryVariable("username");
    document.getElementById("username").innerText = username;

    function sendMessage() {
        var message = document.getElementById("textarea").value;
        if (message.length !== 0) {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open(
                "GET",
                "chat?" + "username=" + username + "&message=" + message,
                true);
            xmlHttp.send();
            xmlHttp.onreadystatechange = function () {
                if (!(xmlHttp.status === 200)) {
                    alert("发送失败！");
                } else
                    document.getElementById("textarea").value = "";
            };
        }
    }

    function getMessage() {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open(
            "POST",
            "chat",
            true);
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xmlHttp.send(null);
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                if (!(xmlHttp.responseText === "false"))
                    document.getElementById("main_context").innerHTML = xmlHttp.responseText;
            }
        }
    }

    setInterval("getMessage()", 500)
</script>
</body>
</html>